<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>区块链管理平台</title>
		<!-- Custom fonts for this template -->
		<link href="https://s0.pstatp.com/cdn/expire-1-M/font-awesome/5.1.0/css/all.css" rel="stylesheet" type="text/css">
		<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
		 rel="stylesheet">
		<!-- Custom styles for this template -->
        <link href="../css/sb-admin-2.min.css" rel="stylesheet">
        <link rel="icon" href="../img/zfsoft.ico">
		<!-- Custom styles for this page -->
		<link href="../vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../css/element.css">
		<link rel="stylesheet" href="../css/net.css">
	</head>
	<body id="page-top">

		<!-- Page Wrapper -->
		<div id="wrapper">

			<!-- Sidebar -->
			<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

				<!-- Sidebar - Brand -->
				<a class="sidebar-brand d-flex align-items-center justify-content-center" href="introduce.html">
					<div class="sidebar-brand-icon rotate-n-15">
						<i class="fas" >
							<img src="../img/zfsoft.ico" width="40" height="40"/>
						</i>
					</div>
					<div class="sidebar-brand-text mx-3">区块链管理平台</sup></div>
				</a>

				<!-- Divider -->
				<hr class="sidebar-divider my-0">

				<!-- Nav Item - Dashboard -->
				<li class="nav-item">
					<a class="nav-link" href="introduce.html">
						<i class="fas fa-fw fa-folder"></i>
						<span>使用向导</span></a>
				</li>


				<!-- Divider -->
				<hr class="sidebar-divider">

				<!-- Heading -->
				<div class="sidebar-heading">
					管理配置
				</div>

				<!-- Nav Item - Pages Collapse Menu -->
				<li class="nav-item">
					<a class="nav-link collapsed" href="host.html">
						<i class="fas fa-fw fa-cog"></i>
						<span>主机管理</span>
					</a>
				</li>

				<!-- Nav Item - Utilities Collapse Menu -->
				<li class="nav-item">
					<a class="nav-link collapsed" href="organizations.html">
						<i class="fas fa-fw fa-wrench"></i>
						<span>组织管理</span>
					</a>
				</li>

				<!-- Nav Item - Utilities Collapse Menu -->
				<li class="nav-item">
					<a class="nav-link collapsed" href="channel.html" aria-controls="collapseUtilities">
						<i class="fas fa-fw fa-chart-area"></i>
						<span>通道管理</span>
					</a>
                </li>
                
                <li class="nav-item active">
                    <a class="nav-link collapsed" href="net.html">
                      <i class="fas fa-fw fa-table"></i>
                      <span>网络管理</span>
                    </a>
                </li>

			</ul>
			<!-- End of Sidebar -->

			<!-- Content Wrapper -->
			<div id="content-wrapper" class="d-flex flex-column">

				<!-- Main Content -->
				<div id="content">

					<!-- Topbar -->
					<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

						<!-- Sidebar Toggle (Topbar) -->
						<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
							<i class="fa fa-bars"></i>
						</button>

						<ul class="navbar-nav ml-auto">

							<div class="topbar-divider d-none d-sm-block"></div>

							<!-- Nav Item - User Information -->
							<li class="nav-item dropdown no-arrow">
								<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown"
								 aria-haspopup="true" aria-expanded="false">
									<span class="mr-2 d-none d-lg-inline text-gray-600 small">Admin</span>
									<img class="img-profile rounded-circle" src="../img/admin.jpg">
								</a>
								<!-- Dropdown - User Information -->
								<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
									<a class="dropdown-item" href="/deploy/logout/">
										<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
										退出
									</a>
								</div>
							</li>
						</ul>
					</nav>
					<!-- End of Topbar -->
					<!-- Begin Page Content -->
					<div class="container-fluid">
						<h1 class="h3 mb-2 text-gray-800">启动网络</h1>
						<h2 class="h5 mb-2 text-gray-800">在主机和组织都准备好之后，到网络管理中创建区块链网络，网络在创建之后会自动启动，所有属于本网络组织的节点都会启动，至此，已完成了区块链网络的构建。</h2>
						<div class="net-wrap clearfix">
							<div>
								<div>
									<el-form :model="version" >
										<el-form-item label="选择fabric版本" prop="type">
											<el-select v-model="version" style="width:100px">
												<el-option label="1.4.6" value="1.4.6"></el-option>
												<el-option label="2.2.2" value="2.2.2"></el-option>
											</el-select>
										</el-form-item>
									</el-form>
								</div>
								<div style="text-align: left;;;margin-bottom: 20px;">
									<el-button type="primary" @click="generate('version')">生成配置文件</el-button>
									<el-button type="primary" @click="generate_extend()">生成扩展配置文件</el-button>
								</div>
								<div style="text-align: left;;;margin-bottom: 20px;">
									<el-button type="primary" @click="addhost()">主机扩展选择</el-button>
									<el-dialog title="选择进入扩展文件的主机" :visible.sync="dialogVisible" width="500" :before-close="handleClose" :close-on-click-modal="false">
										<el-table :data="tableData" style="width: 100%">
											<el-table-column prop="mark" label="别名" width=":10%">
											</el-table-column>
											<el-table-column prop="ip" label="服务器IP" width=":20%">
											</el-table-column>
											<el-table-column prop="name" label="用户名" width=":10%">
											</el-table-column>
											<el-table-column prop="password" label="密码"  width=":20%">
											</el-table-column>
											<el-table-column label="操作">
												<template slot-scope="scope">
													<el-button size="mini"  type="danger" @click="chooseHost(scope.$index, scope.row)">选择</el-button>
												</template>
											</el-table-column>
										</el-table>
									</el-dialog>
									<el-button type="primary" @click="orgExtend()">组织扩展</el-button>
									<el-dialog title="组织新增还是扩展" :visible.sync="dialogorgextVisible" width="500" :before-close="handleCloseOrgExt" :close-on-click-modal="false">
										<el-button type="primary" @click="orgAdd()">新增组织</el-button>
										<el-button type="primary" @click="orgExt()">对已有组织扩展</el-button>
										<el-table :data="tableAddOrgData" style="width: 100%">
											<el-table-column prop="name" label="名字" width=":10%">
											</el-table-column>
											<el-table-column prop="domain" label="域名" width=":20%">
											</el-table-column>
											<el-table-column prop="type" label="组织类型" width=":10%">
											</el-table-column>
											<el-table-column prop="hosts" label="主机" width=":20%">
											</el-table-column>
											<el-table-column label="操作">
												<template slot-scope="scope">
													<el-button size="mini"  type="danger" @click="chooseNewOrg(scope.$index, scope.row)">选择组织</el-button>
												</template>
											</el-table-column>
										</el-table>
									</el-dialog>
									<el-dialog title="为组织添加主机" :visible.sync="dialogorgextendVisible" width="500" :before-close="handleCloseOrgExtend" :close-on-click-modal="false">
										<el-table :data="tableExtendOrgData" style="width: 100%">
											<el-table-column prop="mark" label="别名" width=":10%">
											</el-table-column>
											<el-table-column prop="ip" label="服务器IP" width=":20%">
											</el-table-column>
											<el-table-column prop="name" label="用户名" width=":10%">
											</el-table-column>
											<el-table-column prop="password" label="密码"  width=":20%">
											</el-table-column>
											<el-table-column label="操作1">
												<template slot-scope="scope1">
													<el-button size="mini"  type="danger" @click="chooseOrgHost(scope1.$index, scope1.row)">选择该主机</el-button>
												</template>
											</el-table-column>
										</el-table>
									</el-dialog>
									<el-button type="primary" @click="channelExtend()">通道扩展</el-button>
									<el-dialog title="通道新增还是扩展" :visible.sync="dialogchaextVisible" width="500" :before-close="handleCloseChaExt" :close-on-click-modal="false">
										<el-button type="primary" @click="chaAdd()">新增通道</el-button>
										<el-table :data="tableAddChaData" style="width: 100%">
											<el-table-column prop="name" label="名字" width=":10%">
											</el-table-column>
											<el-table-column prop="orgs" label="组织" width=":20%">
											</el-table-column>
											<el-table-column label="操作">
												<template slot-scope="scope">
													<el-button size="mini"  type="danger" @click="chooseNewCha(scope.$index, scope.row)">选择</el-button>
												</template>
											</el-table-column>
										</el-table>
									</el-dialog>
								</div>
								<div class="net-content">
									<div style="white-space: pre-wrap;">{{ text }}</div>
								</div>
							</div>
							<div>
								<el-button id="deployF" type="primary" @click="deploy()">部署区块链网络</el-button>
								<el-button id="cleanF" type="primary" @click="clean()">清理区块链网络</el-button>
								<div class="net-content" id="deployShow">
									<div style="white-space: pre-wrap;">{{ test }}</div>
								</div>
							</div>
						</div>
					</div>
					<!-- /.container-fluid -->
				</div>
				<!-- End of Main Content -->
				<!-- Footer -->
				<footer class="sticky-footer bg-white">
					<div class="container my-auto">
						<div class="copyright text-center my-auto">
							<span>Copyright &copy; 卓繁信息 2020</span>
						</div>
					</div>
				</footer>
				<!-- End of Footer -->

			</div>
			<!-- End of Content Wrapper -->

		</div>
		<!-- End of Page Wrapper -->

		<!-- Scroll to Top Button-->
		<a class="scroll-to-top rounded" href="#page-top">
			<i class="fas fa-angle-up"></i>
		</a>

		<!-- Bootstrap core JavaScript-->
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="https://www.jq22.com/jquery/bootstrap-4.2.1.js"></script>

		<!-- Core plugin JavaScript-->
		<script src="../vendor/jquery-easing/jquery.easing.min.js"></script>

		<!-- Custom scripts for all pages-->
		<script src="../js/sb-admin-2.min.js"></script>

		<!-- Page level plugins -->
		<script src="../vendor/datatables/jquery.dataTables.min.js"></script>
		<script src="../vendor/datatables/dataTables.bootstrap4.min.js"></script>

		<!-- Page level custom scripts -->
		<script src="../js/demo/datatables-demo.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
		<script src="../js/element.js"></script>

		<script>
			var vue = new Vue({
				el: '#wrapper',
				data:{
					text:"生成配置文件...",
					test:'部署过程显示...',
					path:"ws://192.168.0.30:8080/deploy/websocket/234",
					socket:"",
					version:'1.4.6',
					type_extend:'新增组织',
					host: {
						mark: '',
						name: '',
						ip: '',
						password: '',
						status: ''
					},
					dialogVisible: false,
					dialogorgextVisible: false,
					dialogchaextVisible: false,
					dialogorgextendVisible: false,
					orgaddext: 0,
					tableData: [],
					tableAddOrgData: [],
					tableAddChaData: [],
					tableExtendOrgData: [],
					scrollTop:null
				},
				mounted () {
					// 初始化
					this.init();
				},
				methods: {
					init: function () {
						if(typeof(WebSocket) === "undefined"){
							alert("您的浏览器不支持socket")
						}else{
							this.socket = new WebSocket(this.path)
							this.socket.onopen = this.open
							this.socket.onerror = this.error
							this.socket.onmessage = this.getMessage
						}
					},
					open: function () {
						console.log("socket连接成功")
					},
					error: function () {
						console.log("连接错误")
					},
					getMessage: function (msg) {
						this.test+=msg.data+'\n';
						this.$nextTick(() => {
							let msg = document.getElementById('deployShow')
							$("#deployShow").scrollTop(msg.scrollHeight)
						})
					},
					send: function (params) {
						this.socket.send(params)
					},
					close: function () {
						console.log("socket已经关闭")
					},
					generate(version_name) {
						console.log(this.$refs[version_name])
						let _this = this;
						axios({
							headers:{
								'Content-Type': 'application/json'
							},
							method:'post',
							url:'/deploy/generate',
							data:JSON.stringify(_this.version)
						}).then(function(res) {
								_this.text = res.data;
							}).catch(function (error) {
								alert(error)
							})
						},
					generate_extend() {
						let _this = this;
						axios({
							headers:{
								'Content-Type': 'application/json'
							},
							method:'post',
							url:'/deploy/generate_extend',
						}).then(function(res) {
							_this.text = res.data;
						}).catch(function (error) {
							alert(error)
						})
					},
					addhost() {
						this.dialogVisible = true;
						let _this = this;
						axios.post('/deploy/hostListByStatus')
								.then(function(res) {
									_this.tableData = res.data;
									for(let i=0;i<res.data.length;i++){
										_this.tableData[i].password="*******"
									}
								})
								.catch(function(error) {
									alert(error)
								})
					},
					orgExtend() {
						this.dialogorgextVisible = true;
					},
					channelExtend() {
						this.dialogchaextVisible = true;
					},
					orgAdd() {
						this.orgaddext=0;
						let _this = this;
						axios({
							headers:{
								'Content-Type': 'application/json'
							},
							method:'post',
							url:'/deploy/OrgListByStatus',
							data:"0"
						}).then(function(res) {
							_this.tableAddOrgData = res.data;
						})
						.catch(function(error) {
							alert(error)
						})
					},
					orgExt() {
						this.orgaddext=1;
						let _this = this;
						axios({
							headers:{
								'Content-Type': 'application/json'
							},
							method:'post',
							url:'/deploy/OrgListByStatus',
							data:"1"
						}).then(function(res) {
									_this.tableAddOrgData = res.data;
								})
								.catch(function(error) {
									alert(error)
								})
					},
					chaAdd() {

						let _this = this;
						axios.post('/deploy/ChaListByStatus')
								.then(function(res) {
									_this.tableAddChaData = res.data;

								})
								.catch(function(error) {
									alert(error)
								})
					},
					chooseHost(index, row) {
						console.log(index, row);
						var _this = this;

						_this.$confirm('确认选择该主机, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							axios.post('/deploy/chooseHost', _this.tableData[index])
									.then(function (res) {
										_this.tableData=res.data;
										for(let i=0;i<res.data.length;i++){
											_this.tableData[i].password="*******"
										}
									}).catch(function (error) {
								alert(error)
							})
						}).catch(() => {

						});
					},
					chooseNewOrg(index, row) {
						console.log(index, row);
						var _this = this;
						if (_this.orgaddext==0){
							_this.$confirm('确认选择该主机, 是否继续?', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							}).then(() => {
								axios.post('/deploy/chooseNewOrg', _this.tableAddOrgData[index])
										.then(function (res) {
											_this.tableAddOrgData=res.data;

										}).catch(function (error) {
									alert(error)
								})
							}).catch(() => {

							});
						}else{
							// _this.dialogorgextVisible=false;
							_this.$confirm('确认选择该组织, 是否继续?', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							}).then(() => {
								axios.post('/deploy/chooseOldOrg', _this.tableAddOrgData[index])
										.then(function (res) {
											_this.dialogorgextendVisible=true;
											_this.tableExtendOrgData=res.data;
										}).catch(function (error) {
									alert(error)
								})
							}).catch(() => {
							});
						}
					},
					chooseOrgHost(index, row) {
						var _this = this;
						_this.$confirm('确认选择该主机, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							axios.post('/deploy/chooseOrgHost', _this.tableExtendOrgData[index])
									.then(function (res) {
										table=[];
										j=0;
										alert(res.data.toString());
										for(let i=0;i<_this.tableExtendOrgData.length;i++){
											if (_this.tableExtendOrgData[i].mark.toString()==res.data.toString()){
												continue;
											}
											else{
												table[j]=_this.tableExtendOrgData[i];
												j=j+1;
											}
										}
										_this.tableExtendOrgData=table;
									}).catch(function (error) {
								alert(error)
							})
						});
					},

					chooseOldOrg(index, row) {
						console.log(index, row);
						var _this = this;
						_this.$confirm('确认选择该组织, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							axios.post('/deploy/chooseOldOrg', _this.tableAddOrgData[index])
									.then(function (res) {
										_this.tableAddOrgData=res.data;

									}).catch(function (error) {
								alert(error)
							})
						}).catch(() => {

						});
					},
					chooseNewCha(index, row) {
						console.log(index, row);
						var _this = this;

						_this.$confirm('确认选择该主机, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							axios.post('/deploy/chooseNewCha', _this.tableAddChaData[index])
									.then(function (res) {
										_this.tableAddChaData=res.data;

									}).catch(function (error) {
								alert(error)
							})
						}).catch(() => {

						});
					},
					handleClose(done) {
						this.dialogVisible = false;
					},
					handleCloseOrgExt(done) {
						this.dialogorgextVisible = false;
					},
					handleCloseOrgExtend(done) {
						this.dialogorgextendVisible = false;
					},
					handleCloseChaExt(done) {
						this.dialogchaextVisible = false;
					},
					deploy() {
						document.getElementById('deployF').disabled=true;
						document.getElementById('cleanF').disabled=true;
						axios({
							headers:{
								'Content-Type': 'application/json'
							},
							method:'post',
							url:'/deploy/deployFabric',
							data:"deploy"
						}).then(function (res) {
							alert(res.data.data)
							document.getElementById('deployF').disabled=false;
							document.getElementById('cleanF').disabled=false;
						}).catch(function (error) {
							alert(error)
						})
					},
					clean() {
						document.getElementById('deployF').disabled=true;
						document.getElementById('cleanF').disabled=true;
						axios({
							headers:{
								'Content-Type': 'application/json'
							},
							method:'post',
							url:'/deploy/deployFabric',
							data:"clean"
						}).then(function (res) {
							alert(res.data.data)
							document.getElementById('deployF').disabled=false;
							document.getElementById('cleanF').disabled=false;
						}).catch(function (error) {
							alert(error)
						})
					}
				},
				destroyed () {
					// 销毁监听
					this.socket.onclose = this.close
				}
			})
		</script>
	</body>

</html>
